<template>
  <div class='breadExpandTabWrap'>
    <div class='breadExpandTabItem breadExpandTabHeader'
         :style='`background:${infoObj.titleColor}`' @click='handleExpand'>
      {{ infoObj.title }}({{ data && data.length }})
      <i class='triangle ' :class='expand?"el-icon-arrow-down":"el-icon-arrow-right"'/>
    </div>
    <ul class='breadExpandTabContent ' :class='expand?"max1000":"max0"'>
      <li v-for='(e,key) in data' :key='key' @click='()=>handleBreadItemClick(e,key,infoObj)'>
        <span class='breadExpandTabContentItem' :style='`color:${infoObj.titleColor}`'>
          {{ key + 1 }}. &nbsp;{{ e[infoObj.itemKey] || e[infoObj.backupKey] }}
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: 'error'
    },
    data: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default: () => ({})
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      expand: false
    }
  },
  computed: {
    INFO_MAP() {
      return this.options
    },
    infoObj() {
      return this.INFO_MAP[this.type]
    }
  },
  methods: {
    handleExpand() {
      console.log(this.expand)
      this.expand = !this.expand
    },
    handleBreadItemClick(e, key, infoObj) {
      this.$emit('handleBreadItemClick', e, key, infoObj)
    }
  },
  mounted() {
    if(this.index === 0) {
      this.expand = true
    }
  }
}
</script>

<style scoped lang='scss'>

.breadExpandTabWrap {
  width: 240px;

  .breadExpandTabHeader {
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    border-radius: 8px;
    font-size: 20px;
    line-height: 44px;
    padding: 0 15px;

    .triangle {
      float: right;
    }
  }

  .breadExpandTabContent {
    overflow: hidden;
    padding-right: 7px;
    box-sizing: border-box;
    width: 100%;
    transition: all 0.5s;
  }
  .breadExpandTabContent > li {
    width: 100%;
    height: 44px;
    line-height: 44px;
    box-sizing: border-box;
    margin-top: 10px;
    background: #FFFFFF;
    box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
    padding: 0 10px;
    cursor: pointer;
  }

  .breadExpandTabContent > li .breadExpandTabContentItem {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  .max1000 {
    //max-height: 1000px;
  }

  .max0 {
    max-height: 0;
  }

  .triangle {
    display: block;
    font-size: 16px;
    color: #fff;
    transition: all 0.5s;
    transform-origin: 25% center;
    margin-top: 15px;
  }
}
</style>
